<template>
  <view class="box">
    <view class="box1">
      <uv-tabs :list="list" @click="click" activeStyle="color: #008c8c" lineColor="#008c8c" :scrollable="false">
      </uv-tabs>
      <!-- 全部 -->
      <view class="box2" v-if="current == 0">
        <view class="box3" v-for="item in 3">
          <view class="box40">
            <view class="">
              <image src="../../static/image/dizhi.png" mode=""></image>
            </view>
            <view class="">山东省/济南市/历下区/山钢新天地15层</view>
          </view>
          <view class="box41">
            <view style="color: #a1a1a1;">服务项目</view>
            <view style="color: #838383;">上门喂猫</view>
          </view>
          <view class="box41">
            <view style="color: #a1a1a1;">服务时间</view>
            <view style="color: #838383;">2023-09-06 15:00-16:00</view>
          </view>
          <view class="box41">
            <view style="color: #a1a1a1;">宠物数量</view>
            <view style="color: #838383;">1只</view>
          </view>
          <view class="box41">
            <view style="color: #a1a1a1;">备注</view>
            <view style="color: #838383;">这是备注</view>
          </view>
          <view class="box41">
            <view style="color: #a1a1a1;">下单时间</view>
            <view style="color: #838383;">2023-09-06 15:00-16:00</view>
          </view>
          <view class="box41">
            <view style="color: #a1a1a1;">订单金额</view>
            <view style="color: #d24036;">￥120</view>
          </view>
          <view class="box41">
            <view style="color: #ffa54d;">待服务</view>
            <view style="color: #fff;background-color: #008c8c;border-radius: 25rpx;padding: 5rpx 10rpx;">订单详情</view>
          </view>
        </view>
      </view>
      <!-- 待服务 -->
      <view class="box2" v-if="current == 1">
        2
      </view>
      <!-- 服务中 -->
      <view class="box2" v-if="current == 2">
        3
      </view>
      <!-- 已完成 -->
      <view class="box2" v-if="current == 3">
        4
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const list = ref(
    [{
      name: '全部',
    }, {
      name: '待服务',
    }, {
      name: '服务中',
    }, {
      name: '已完成',
    }]
  )
  const current = ref(0)
  const click = ((item) => {
    // console.log('item', item);
    current.value = item.index
  })
</script>

<style lang="scss">
  @import url("dingdanzx.scss");
</style>